<template>
  <div class="transport-way-wrap">
    <h2>配送方式:</h2>
    <div class="flex-yc">
      <div
        class="transport-way-item flex-yc a"
        :class="{ active: item === 1 }"
        v-for="item in 3"
        :key="item"
      >
        <div class="radio"></div>
        <div class="flex-y">
          <h3 style="font-weight: bold">标准配送</h3>
          <p>预计付款后 7 天内发货</p>
        </div>
        <span style="flex-shrink: 0">¥0.00</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts"></script>

<style scoped lang="scss">
.transport-way-wrap {
  padding: 20px 20px 32px;
  margin-top: 32px;
  border-top: 1px solid $borderCol;
  border-bottom: 1px solid $borderCol;

  > h2 {
    margin-bottom: 18px;
    font-size: 16px;
  }

  .transport-way-item {
    & + .transport-way-item {
      margin-left: 100px;
    }

    &.active {
      .radio {
        border-color: $primary;
      }
    }

    .radio {
      width: 12px;
      height: 12px;
      margin-right: 8px;
      border: 1px solid $borderCol;
      border-radius: 50%;
    }

    .flex-y {
      margin-right: 40px;
      font-size: 16px;
      font-weight: 400;

      h3 {
        margin-bottom: 6px;
        font-weight: 400 !important;
        color: rgb(4 7 36 / 85%);
      }

      p {
        font-size: 14px;
        color: rgb(4 7 36 / 45%);
      }
    }
  }
}
</style>
